<template>
  <div style="padding: 20px">
    <!--搜索表单-->
    <div>
      <el-input style="width: 240px; margin-left: 5px; margin-top: 5px" placeholder="请输入书名"
                v-model="params.title"></el-input>
      <el-input style="width: 200px; margin-left: 5px; margin-top: 5px" placeholder="请输入作者"
                v-model="params.author"></el-input>
      <el-input style="width: 220px; margin-left: 5px; margin-top: 5px" placeholder="请输入出版社"
                v-model="params.press"></el-input>
      <el-select v-model="params.category" placeholder="请选择分类" style="margin-left: 5px;"
                 collapse-tags>
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button style="margin-left: 5px" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
      <el-button style="margin-left: 5px" type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
      <el-button style="margin-left: 5px" type="primary" @click="table = true"><i class="el-icon-eleme"></i>借阅清单
      </el-button>
    </div>

    <!--表单主体-->
    <el-table :data="tableData" stripe style="margin-top: 20px;flex: 1">
      <el-table-column type="index" label="序号" style="margin-right: 5px"></el-table-column>
      <el-table-column prop="title" label="书名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="press" label="出版社"></el-table-column>
      <el-table-column prop="isbn" label="ISBN"></el-table-column>
      <el-table-column prop="publishDate" label="出版日期"></el-table-column>
      <el-table-column prop="category" label="分类"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column prop="amount" label="数量"></el-table-column>
      <el-table-column prop="addDate" label="添加日期"></el-table-column>
      <el-table-column label="操作" width="70px">
        <template v-slot="scope">
          <el-button type="primary" @click="addBook(scope.row)">借阅</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div style="margin-top: 15px; position: fixed; bottom: 5%; right: 5%">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total">
      </el-pagination>
    </div>

    <el-drawer
        title="借阅清单"
        style="font-size: 25px"
        :visible.sync="table"
        direction="rtl"
        ref="table">
      <div>
        <el-table :data="selectBook" stripe height="80vh">
          <el-table-column type="index" label="序号" style="margin-right: 5px"></el-table-column>
          <el-table-column prop="title" label="书名" show-overflow-tooltip></el-table-column>
          <el-table-column prop="author" label="作者"></el-table-column>
          <el-table-column prop="press" label="出版社"></el-table-column>
          <el-table-column prop="isbn" label="ISBN"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="tableScope">
              <el-button type="danger" @click="deleteBook(tableScope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px;">
          <el-button type="primary" @click="borrowConfirm" :loading="loading" size="medium"
                     style="width: 48%">{{ loading ? '提交中 ...' : '确 定' }}
          </el-button>
          <el-button @click="cancel" size="medium" style="width: 48%">取 消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>

import request from "@/utils/request";
import Cookies from "js-cookie";

export default {
  name: 'BookBorrow',
  data() {
    return {
      tableData: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10
      },
      options: [{
        value: '未分类',
        label: '未分类'
      }, {
        value: '科幻类',
        label: '科幻类'
      }, {
        value: '文史类',
        label: '文史类'
      }, {
        value: '科普类',
        label: '科普类'
      }
      ],
      table: false,
      loading: false,
      selectBook: []
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get('book/page', {
        params: this.params
      }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    reset() {
      //点击重置按钮重置
      this.params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.load()
    },
    handleCurrentChange(pageNum) {
      //点击分页按钮触发分页
      this.params.pageNum = pageNum
      this.load()
    },
    borrowConfirm() {
      let login = Cookies.get('login') ? JSON.parse(Cookies.get('login')) : {}
      if (this.selectBook.length === 0) {
        this.$refs.table.closeDrawer()
        return
      }
      if (this.loading) {
        return
      }
      this.$confirm('借阅清单中的所有图书吗？')
          .then(_ => {
            this.loading = true
            request.put('/book/borrow/' + login.username, this.selectBook).then(res => {
              if (res.code == 200) {
                this.$notify.success({title: "", message: '借阅成功', position: 'bottom-left'})
                this.$refs.table.closeDrawer()
                // 动画关闭需要一定的时间
                setTimeout(() => {
                  this.loading = false
                }, 400)
                this.selectBook = []
                this.load()
              } else {
                this.$notify.error({title: "", message: res.msg, position: 'bottom-left'})
                this.cancel()
              }
            })
          })
          .catch(_ => {});
    },
    cancel() {
      this.table = false
      this.loading = false
    },
    addBook(row) {
      if (row.amount == 0) {
        this.$notify.error({title: "", message: '暂无图书可借', position: 'bottom-left'})
        return
      }
      if (!this.selectBook.includes(row)) {
        this.$notify.success({title: "", message: '已添加到借阅清单', position: 'bottom-left'})
        this.selectBook.push(row)
      } else {
        this.$notify.error({title: "", message: '同本图书每人仅能借阅一本', position: 'bottom-left'})
      }
    },
    deleteBook(row) {
      const index = this.selectBook.indexOf(row)
      if (row !== -1) {
        this.selectBook.splice(index, 1)
        this.$notify.success({title: "", message: '删除成功', position: 'bottom-left'})
      } else {
        this.$notify.error({title: "", message: '删除失败', position: 'bottom-left'})
      }
    }
  }
}
</script>